<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Avatar } from '@arco-design/web-vue';
  import { Marquee } from '/@/components/Marquee';
  import { queryHomeHotsPotList } from '/@/api/home';
  import type { HotsPotRecord } from '/@/api/model/homeModel';
  import { sanitizeToText } from '/@/utils/purify';
  import HomeCard from './components/HomeCard.vue';

  const hotsPotListRef = ref<HotsPotRecord[]>([]);
  const defaultMarqueeSpeed = 10;
  interface hotsPotColumn {
    duration: number;
    length: number;
    items: HotsPotRecord[];
  }
  const hotsPotColumnsRef = computed(() => {
    const columns: hotsPotColumn[] = [];
    // 分堆
    const pockets: HotsPotRecord[][] = [[], [], []];
    let index = 0;
    for (let i = 0; i < hotsPotListRef.value.length; i++) {
      pockets[index % 3].push(hotsPotListRef.value[i]);
      index++;
    }
    // 重组
    for (let i = 0; i < pockets.length; i++) {
      const pocket = pockets[i];
      const length = pocket.reduce((prev, curr) => {
        return prev + (curr?.brief?.length ?? 0);
      }, 0);
      columns.push({
        duration: length / defaultMarqueeSpeed,
        length,
        items: pocket,
      });
      index++;
    }
    return columns;
  });
  (async () => {
    const data = await queryHomeHotsPotList();
    hotsPotListRef.value = data;
  })();
  // 沸点触点暂停
  const pauseStatus = ref(false);
  function onMarqueeEnter() {
    pauseStatus.value = true;
  }
  function onMarqueeLeave() {
    pauseStatus.value = false;
  }
</script>
<template>
  <HomeCard title="热门沸点">
    <div
      class="relative sm:mx-32 h-[195px] overflow-hidden px-[4px] rounded-[20px] flex flex-col justify-between py-6 pins-shadow"
      @mouseenter="onMarqueeEnter"
      @mouseleave="onMarqueeLeave"
    >
      <div class="absolute inset-0 rounded-[20px] pins-bg-1"></div>
      <div class="absolute inset-0 rounded-[20px] pins-bg-2"></div>
      <Marquee
        v-for="(column, id) in hotsPotColumnsRef"
        :key="id"
        :pause="pauseStatus"
        :duration="column.duration"
      >
        <a
          class="h-10 pl-5 mx-4 relative flex items-center cursor-pointer"
          v-for="item in column.items"
          :key="item.id"
          :href="`/pin/${item.id}`"
          target="_blank"
        >
          <Avatar
            class="absolute left-0 top-1 w-8 h-8 rounded-full drop-shadow"
            :imageUrl="item.user_icon"
          />
          <div class="h-6 pl-8 pr-3 bg-[#4667ff]/[0.16] shadow rounded-[4px]"
            >{{ item.user_name }}：{{ sanitizeToText(item.brief) }}</div
          >
        </a>
      </Marquee>
    </div>
  </HomeCard>
</template>

<style scoped>
  .backdrop-filter-blur {
    backdrop-filter: blur(5px);
  }

  .pins-shadow {
    box-shadow: -10px -10px 50px rgba(0, 0, 0, 0.15);
  }

  .pins-marquee-shadow {
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  }

  .pins-bg-1 {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.264) 100%
    );
    backdrop-filter: blur(5px);
  }

  .pins-bg-2 {
    border: 4px #fff solid;
  }
</style>
